<template>
  <view>
    <view class="relative flex">
      <uni-icons
        font-family="heroicons-outline"
        :size="24"
        @click="popoverVisible = true"
      >
        {{ '\ue998' }}
      </uni-icons>
      <view
        v-if="popoverVisible"
        class="fixed inset-0 z-20"
        @click="popoverVisible = false"
      ></view>
      <view
        class="absolute right-0 top-6 z-20 mt-2 flex w-36 flex-col space-y-2 rounded bg-gray-100 py-2 text-sm shadow transition-opacity"
        :class="{
          'pointer-events-none opacity-0': !popoverVisible,
          'opacity-100': popoverVisible,
        }"
      >
        <view
          class="flex items-center gap-3 px-3 py-1"
          @click="handleOpenDetail"
        >
          <uni-icons font-family="heroicons-outline" :size="18">
            {{ '\ue9bf' }}
          </uni-icons>
          <text class="whitespace-nowrap">
            {{ t('viewDetails') }}
          </text>
        </view>
        <view class="h-[1px] border-b border-gray-200"></view>
        <template v-if="!roomId">
          <view
            v-for="{ name, label, icon } in AIModels"
            :key="name"
            class="flex items-center justify-between px-3 py-1"
            @click="handleModelChange(name)"
          >
            <view class="flex items-center gap-3">
              <uni-icons font-family="heroicons-solid" :size="16">
                {{ icon }}
              </uni-icons>
              <text class="whitespace-nowrap">{{ label }}</text>
            </view>
            <uni-icons
              v-if="AIModel?.name === name"
              type="checkmarkempty"
              size="16"
              class="ml-3"
            />
          </view>
        </template>
        <template v-if="roomId">
          <view
            v-for="({ label, icon, onClick }, idx) in roomOperations"
            :key="idx"
            class="flex items-center gap-3 px-3 py-1"
            @click="onClick"
          >
            <uni-icons font-family="heroicons-solid" :size="16">
              {{ icon }}
            </uni-icons>
            <text class="whitespace-nowrap">{{ label }}</text>
          </view>
        </template>
      </view>
    </view>
    <uni-popup ref="detailPopupRef" type="center">
      <view class="w-[90vw] rounded-3xl bg-white md:w-[60vw] lg:w-[45vw]">
        <ChatDetailModal />
      </view>
    </uni-popup>
    <RoomRenamePopup v-model="renamePopupVisible" />
    <AlertDialog
      v-model="deleteDialogVisible"
      :title="t('deleteRoomConfirm')"
      @confirm="handleDeleteConfirm"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import ChatDetailModal from '@/components/ChatDetailModal.vue'
import { useStore } from 'vuex'
import RoomRenamePopup from '@/components/RoomRenamePopup.vue'
import AlertDialog from '@/components/AlertDialog.vue'
import { archiveRoom, deleteRoom, unarchiveRoom } from '@/api/chat'
import useLocale from '@/composables/useLocale'
import useAIModelStore from '@/store/modules/AIModel'


const store = useStore()
const { t } = useLocale()

const popoverVisible = ref(false)
const renamePopupVisible = ref(false)
const deleteDialogVisible = ref(false)
const roomId = computed(() => store.state.chat.currentRoomId)
const roomDetail = computed(() => store.state.chat.roomDetail)
const isArchive = computed(() => roomDetail.value?.archive === 1)
const detailPopupRef = ref(null)

function handleOpenDetail() {
  popoverVisible.value = false
  // #ifdef WEB
  detailPopupRef.value?.open()
  // #endif
  // #ifndef WEB
  // TODO: 不知道干什么的暂时注释
  // uni.navigateTo({ url: `/pages/room/detail?modelName=${props.AIModel?.name}` })
  // #endif
}

const AIModelStore = useAIModelStore()
const AIModels = computed(() => AIModelStore.AIModels)
const AIModel  = computed(() => AIModelStore.AIModel)

function handleModelChange(value) {
  AIModelStore.toggleAIModel(value)
  popoverVisible.value = false
}

function handleRename() {
  popoverVisible.value = false
  renamePopupVisible.value = true
}

function handleDeleteRoom() {
  deleteDialogVisible.value = true
  popoverVisible.value = false
}

async function handleArchive() {
  popoverVisible.value = false
  if (roomDetail.value.archive === 0) {
    await archiveRoom(Number(roomId.value))
    uni.redirectTo({ url: '/pages/index/index' })
  } else {
    uni.showLoading()
    await unarchiveRoom(Number(roomId.value))
    uni.hideLoading()
    store.dispatch('chat/updateRoomDetail')
    store.dispatch('chat/updateRoomList')
  }
}

const roomOperations = computed(() => [
  {
    label: t('rename'),
    icon: '\ue9dd',
    onClick: handleRename,
  },
  {
    label: isArchive.value ? t('restore') : t('archive'),
    icon: isArchive.value ? '\ue904' : '\ue905',
    onClick: handleArchive,
  },
  { label: t('delete'), icon: '\uea12', onClick: handleDeleteRoom },
])

function handleDeleteConfirm() {
  deleteRoom(Number(roomId.value))
  deleteDialogVisible.value = false
  uni.redirectTo({ url: '/pages/index/index' })
}
</script>
